青训营任务-我的名片-可爱捏☺

当青训营遇上码上掘金

主题介绍

主题 1：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕 “我的名片” 这个主题进行代码创作。

思路

既然说整个酷炫的

直接上框架

https://github.com/antfu/vitesse-webext

这个模板是基于 Vue 的 webext（浏览器插件手脚架）

webext 是一个可以帮助构建、运行和测试 Web 扩展的命令行工具。

https://wiki.mozilla.org/WebExtensions

webext 的目标是以一种标准的、可移植、跨平台的方式支持浏览器扩展。最初，它将为开发火狐扩展提供一个简化的体验。

我们的目标是实现一个浏览器扩展类型的名片

技术栈

⚡️ Vite 快速构建
🥝 Vue 3 - 组合式 api 3.2+setup 语法
💬webext-bridge 的 local storage 和 VueUse 的使用结合
🌈 UnoCSS - 原子化 CSS 引擎
🦾 TypeScript 语法支持
📦 Components auto importing 自动引入
🌍 WebExtension - 标准浏览器扩展手脚架可以一键生成 chromium、Firefox 适配的扩展
😴 mv3 - manifest v3

坑

本身这个项目没什么坑的、只是

😡

浏览器在 2023 年抛弃 manifest v2

所以使用 manifest v2 打包后的浏览器扩展浏览器不认

会显示

😱

还有一点就是本身不太会 CSS

调 CSS 花了很长时间

但是 unocss 还是很方便的

代码实现

vue

<script setup>
import { useImage } from '@vueuse/core'
const avatarUrl = 'https://s1.ax1x.com/2023/01/23/pSYuIYD.png'
const waka = 'https://wakatime.com/badge/user/84476697-3421-4720-bcdc-efb5c0fbc1b8.svg?style=flat-square'
const kita = 'https://www.z4a.net/images/2023/01/28/kita.gif'
const { isLoading } = useImage({ src: avatarUrl })
const { isLoading_waka } = useImage({ src: waka })
const { isLoading_kita } = useImage({ src: kita })
const to_left = () => {
  document.getElementsByClassName('img')[0].classList.remove('to_right')
  document.getElementsByClassName('right_text')[0].classList.remove('to_right_text')
  document.getElementsByClassName('right_block')[0].classList.remove('to_right_block')
  document.getElementsByClassName('left_block')[0].classList.remove('to_left_block')
  document.getElementsByClassName('left_img')[0].classList.remove('to_left_img')
}
const to_right = () => {
  document.getElementsByClassName('img')[0].classList.add('to_right')
  document.getElementsByClassName('right_text')[0].classList.add('to_right_text')
  document.getElementsByClassName('right_block')[0].classList.add('to_right_block')
  document.getElementsByClassName('left_block')[0].classList.add('to_left_block')
  document.getElementsByClassName('left_img')[0].classList.add('to_left_img')
}
</script>

<template>
  <main class="w-[384px] h-[256px] text-center text-light-700 bg-[#f69db2] font-sans">
    <div class="h-100% w-100% flex flex-row justify-between p-5 items-center gap-5">
      <div class="absolute left-0 top-0 translate-x-[-100%]">
        <div class="flex flex-col justify-end left_block duration-700 ">
          <div class="bg-[#60c5e7] p-5" />
          <div class="bg-[#f3d263] p-5" />
        </div>
      </div>
      <div class="absolute left-0 top-0 translate-x-[-100%]">
        <span v-if="isLoading" class="animate-pulse bg-[#0A4445] px-11.5 py-16 text-center font-black">Loading</span>
        <img v-else :src="kita" class="left_img duration-400">
      </div>
      <span v-if="isLoading" class="animate-pulse bg-[#0A4445] px-11.5 py-16 text-center font-black">Loading</span>
      <img v-else :src="avatarUrl" class="w-35 h-35 img duration-700">
      <div class="flex flex-col gap-5 h-119%">
        <div class="flex flex-row justify-end translate-x-4.9 right_block duration-700 ">
          <div class="bg-[#60c5e7] p-5" />
          <div class="bg-[#f3d263] p-5" />
        </div>
        <div class="flex flex-col gap-5 pt-8 right_text duration-700 ">
          <div class="text-center font-bold text-lg text-[#df4b57]">
            👋  Hi, I’m  @camera-2018
          </div>
          <span v-if="isLoading" class="animate-pulse bg-[#0A4445] px-15 text-center font-black">Loading</span>
          <a v-else href="https://wakatime.com/@84476697-3421-4720-bcdc-efb5c0fbc1b8"><img :src="waka" alt="Total time coded since May 9 2022"></a>
        </div>
      </div>
    </div>
    <footer class="bg-[#f69db2] ">
      <button class="i-carbon-caret-left hover:bg-[#1DCED1] bg-light-50" @click="to_left" />
      <button class="i-carbon-caret-right hover:bg-[#1DCED1] bg-light-50" @click="to_right" />
    </footer>
  </main>
</template>

<style>
.to_right{
  @apply translate-x-142% transition
}

.to_right_text {
  @apply translate-x-190% transition
}

.to_right_block {
  @apply translate-y-[-120%] transition
}

.to_left_block {
  @apply translate-x-100% transition
}

.to_left_img {
  @apply translate-x-90% transition
}
</style>